<template>
    <div class="adoutusclause">
        <section class="clausemain">
            <section class="newaheader">
                <h2 class="title">
                    <p>{{$t('header.index[0]')}}</p>
                </h2>
            </section>
            <section class="clause">
                <el-tabs :value="tabclickvule" @tab-click="tabclick">
                    <el-tab-pane :label="$t('header.index[8]')" name="1">
                        <div class="cont">
                            <h3 class="title">{{$t('header.index[8]')}}</h3>
                            <hr>
                            <div class="conmain">
                                <div v-html="components"></div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane :label="$t('clause[0]')" name="2">
                        <div class="cont">
                            <h3 class="title">{{$t('clause[0]')}}</h3>
                            <hr>
                            <div class="conmain">
                                <div v-html="components"></div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane :label="$t('clause[1]')" name="3">
                        <div class="cont">
                            <h3 class="title">{{$t('header.index[3]')}}</h3>
                            <hr>
                            <div class="conmain">
                                <div v-html="components"></div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane :label="$t('clause[2]')" name="4">
                        <div class="cont">
                            <h3 class="title">{{$t('header.index[2]')}}</h3>
                            <hr>
                            <div class="conmain">
                                <div v-html="components"></div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane :label="$t('clause[3]')" name="5">
                        <div class="cont">
                            <h3 class="title">{{$t('clause[3]')}}</h3>
                            <hr>
                            <div class="conmain">
                                <div v-html="components"></div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane :label="$t('clause[6]')" name="6">
                        <div class="cont">
                            <h3 class="title">{{$t('clause[6]')}}</h3>
                            <hr>
                            <div class="conmain">
                                <div v-html="components"></div>
                            </div>
                        </div>
                    </el-tab-pane>                    
                    <el-tab-pane :label="$t('header.index[9]')" name="7">
                        <div class="cont">
                            <h3 class="title">{{$t('header.index[9]')}}</h3>
                            <hr>
                            <div class="conmain">
                                <div v-html="components"></div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane :label="$t('clause[5]')" name="8">
                        <div class="cont">
                            <h3 class="title">{{$t('header.index[5]')}}</h3>
                            <hr>
                            <div class="conmain">
                                <div v-html="components"></div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane :label="$t('clause[4]')" name="9">
                        <div class="cont">
                            <h3 class="title">{{$t('clause[4]')}}</h3>
                            <hr>
                            <div class="conmain">
                                <div v-html="components"></div>
                            </div>
                        </div>
                    </el-tab-pane>
                    
                    <el-tab-pane :label="$t('clause[7]')" name="10">
                        <div class="cont">
                            <h3 class="title">{{$t('clause[7]')}}</h3>
                            <hr>
                            <div class="conmain">
                                <div v-html="components"></div>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </section>
        </section>
    </div>
</template>

<script>
import { systemAgreeList, systemAgree } from '@/api/software';
import PagesSize from "_dom/paging"
export default {
    name: "adoutusclause",
    data() {
        return {
          list:[],
          components: "",
          tabclickvule: "1",
        };
    },
    methods: {
        tabclick(row){
            this.getdata(row.name);
        },
        getdata(data){
            let _data = {
                type: data
            };
            systemAgree(_data).then(res => {
                 
                    this.components = res.content;
                 
            }).catch(err => {});
        }
    },
    created(){
        systemAgreeList().then(res=>{
          
            this.list = res;
           
        })
        if(this.$route.query.id){
            this.getdata(this.$route.query.id);
            this.tabclickvule = _.cloneDeep(this.$route.query.id).toString();
        }
        
    },
    components: {
         PagesSize,
    },
};
</script>

